<template>
  <div class="contact-container">
    <ContactItem
      v-for="item in contactList"
      :key="item.icon"
      :icon="item.icon"
      :text="item.text"
      :showPop="item.showPop"
      :href="item.href"
      :isRouter="false"
    />
  </div>
</template>

<script>
import ContactItem from "@/components/ContactItem";
export default {
  name: "Contact",
  props: {
    userInfo: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    ContactItem,
  },
  data() {
    return {
      contactList: [
        {
          icon: "github",
          text: this.userInfo?.github || "无",
          showPop: false,
        },
        {
          icon: "email",
          text: this.userInfo?.email || "无",
          href: this.userInfo?.email ? `mailto:${this.userInfo?.email}` : "#",
        },
        {
          icon: "qq",
          text: this.userInfo?.qq || "无",
          href: this.userInfo?.qq
            ? `tencent://message/?uin=${this.userInfo?.qq}&Site=&Menu=yes`
            : "#",
        },
        {
          icon: "wechat",
          text: this.userInfo?.wechat || "无",
          showPop: false,
        },
      ],
    };
  },
};
</script>

<style scoped>
.contact-container {
  gap: 15px;
  display: flex;
  flex-direction: column;
}
.contactitem-container {
  font-size: 14px;
}
</style>
